<template>
    <div class="change-car-add">
         <van-list
                v-model:loading="changeCarAddData.loading"
                :finished="changeCarAddData.finished"
                finished-text="没有更多了"
                @load="changeCarStock"
        >
            <div class="section display-flex align-center" v-for="(item, index) in changeCarAddData.list" :key="index" @click="selected(index)">
                <div class="font-size-26 ml-26 fill-width">
                    <div class="title display-flex align-center">
                        <div class="check-box">
                            <van-checkbox v-model="item.checked" shape="square"></van-checkbox>
                        </div>
                        <span>{{ item.spzs }}</span>
                    </div>
                    <div class="content" >
                        <div class="item display-flex justify-between">
                            <div class="flex-item">
                                <span class="font-999999">纱支：</span>
                                <span>{{ item.wpggA }}</span>
                            </div>
                            <div class="flex-item">
                                <span class="font-999999">品牌：</span>
                                <span>{{ item.spcd }}</span>
                            </div>
                        </div>
                        <div class="item display-flex justify-between">
                            <div class="flex-item">
                                <span class="font-999999">批号：</span>
                                <span>{{ item.spbh }}</span>
                            </div>
                            <div class="flex-item">
                                <span class="font-999999">条码：</span>
                                <span>{{ item.sptm }}</span>
                            </div>
                        </div>
                        <div class="item display-flex justify-between">
                            <div class="flex-item">
                                <span class="font-999999">柜号：</span>
                                <span>{{ item.spgh }}</span>
                            </div>
                            <div class="flex-item">
                                <span class="font-999999">仓库/库位：</span>
                                <span>{{ item.spckmc + '/' + item.ckcw }}</span>
                            </div>
                        </div>
                        <div class="item display-flex justify-between">
                            <div class="flex-item">
                                <span class="font-999999">进仓日期：</span>
                                <span>{{ item.ssrqid }}</span>
                            </div>
                            <div class="flex-item">
                                <span class="font-999999">入仓车牌：</span>
                                <span>{{ item.cardNo }}</span>
                            </div>
                        </div>
                        <div class="item display-flex justify-between">
                            <div class="flex-item">
                                <span class="font-999999">库存件数：</span>
                                <span>{{ item.remain }}件</span>
                            </div>
                            <div class="flex-item">
                                <span class="font-999999">库存重量：</span>
                                <span>{{ item.remainWeight }}吨</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
        
        <div class="footer display-flex align-center font-size-26 ">
            <van-checkbox v-model="selectedAll.status" shape="square" class="left" @click="allSelected">全选</van-checkbox>
            <div class="flex-item center">
                <div>
                    <span>已选：</span>
                    <span class="font-CE0C0C">{{ selectedAll.remainSum }}</span>
                    <span> 件</span>
                </div>
                 <div>
                    <span>合计：</span>
                    <span class="font-CE0C0C">{{ selectedAll.remainWeightSum }} </span>
                    <span> 吨</span>
                </div>
            </div>
            <van-button color="#255FB6" block class="btn" @click="save" v-hasPermi="['zhcloud:changeCar:add']">保存</van-button>
        </div>
        <van-popup transition="all" v-model:show="showPopup" position="right" :before-close="beforeClose" :style="{height: '100%'}" teleport="body" class="search display-flex flex-direction justify-between">
            <div class="search-content font-size-26 font-black">
                <div class="mt-30">
                    <span>柜号</span>
                    <input v-model="changeCarAddData.query.spgh" placeholder="支持模糊查询" class="search-item-input mt-20" />
                </div>
                <div class="mt-30">
                    <span >批号</span>
                    <input v-model="changeCarAddData.query.spbh" placeholder="支持模糊查询" class="search-item-input mt-20" />
                </div>
                <div class="mt-30">
                    <span >物品规格</span>
                    <input v-model="changeCarAddData.query.spzs" placeholder="支持模糊查询" class="search-item-input mt-20" />
                </div>
            </div>
            <div class="display-flex search-footer justify-between">
                <van-button plain class="btn" @click="reset">重置</van-button>
                <van-button color="#255FB6" class="btn" @click="handleSearch">确定</van-button>
            </div>
        </van-popup>
        <van-action-sheet v-model:show="searchData.showSpckmc" title="请选择仓库" class="pb-30">
            <div class="select-warehouse3 display-flex flex-wrap">
                <div v-for="(item, index) in warehouse3Data.list" :key="item.spckid" :class="item.active?'active item':'item'" @click="warehouseSelected(index)">
                    <span>{{ item.spckmc }}</span>
                </div>
            </div>
        </van-action-sheet>
    </div>
</template>
<script setup lang="ts">
    import { onMounted, reactive, computed, onUnmounted } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { getSelectStock } from '@/api/changeCar'
    import { getWarehouse3 } from '@/api/warehouse'
    import { getLocalStorage, setLocalStorage } from '@/utils/localStorage'
    import { WEIGHT_DIGIT, NUMBER_DIGIT } from '@/utils/constant'
    import { useHeaderBarStore } from '@/store/headerBar'

    const router = useRouter()
    const route = useRoute()
    const userInfo: any = getLocalStorage('userInfo')
    const headerBarStore = useHeaderBarStore()
    const searchData: any = reactive({
        showSpckmc: false,
    })
    const warehouse3Data: any = reactive({
        query:{},
        list:[]
    })
    const changeCarAddData: any = reactive({
        loading: false,
        finished: false,
        query:{
            ckcw:"",
            spbh: "",
            spcd: "",
            isSure:"0",
            spckmc: route.query.spckmc as any,
            spgh: "",
            sptm:"", 
            spzs: "",
            spkhmcid: userInfo.shopId,    
        },
        list:[],
        params: {
            pageNum:1,
            pageSize:10
        },
        total:0
    })
    const selectedAll: any = reactive({
        status:false,
        remainSum:0,
        remainWeightSum:0
    })
    const showPopup = computed(() => headerBarStore.showPopup)

    onMounted(() => {
        const query:any = route.query
        const exSpdzlds = [] 
		changeCarAddData.query.spckmc = query.spckmc
		const dtOpList = JSON.parse(query.dtOpList) || []
		
        if(dtOpList.length > 0) {
            for(let i in dtOpList) {
                exSpdzlds.push(dtOpList[i].spdzld)
            }
            changeCarAddData.query.exSpdzlds = exSpdzlds
        }
        changeCarStock()
        warehouse3()
    })

    onUnmounted(() => {
        headerBarStore.showPopup = false
    })

    function warehouse3() {
        getWarehouse3(warehouse3Data.query).then((res: any) => {
            const data = res.data
            for(let i in data) {
                data[i].active = false
            }
            warehouse3Data.list = data
        })
    }

    function changeCarStock() {
        changeCarAddData.loading = true
        getSelectStock(changeCarAddData.query, changeCarAddData.params).then((res: any) => {
            const total = res.total
            const data = res.rows
            for(let i in data) {
                data[i].checked = false
            }

           
            if(total <= changeCarAddData.params.pageSize) {
                changeCarAddData.list = data
            } else {
                changeCarAddData.params.pageNum++
                changeCarAddData.list = changeCarAddData.list.concat(...data)
            }

            changeCarAddData.loading = false
            if(changeCarAddData.list.length >= total) {
                changeCarAddData.finished = true
            }
            changeCarAddData.total = total
        })
    }

    function selected(index: number) {
        const data =  changeCarAddData.list
        data[index].checked = data[index].checked?true:false
        getSum()
    }

    function allSelected() {
        const data = changeCarAddData.list
        for(let i in data) {
            data[i].checked = selectedAll.status?true:false
        }
        changeCarAddData.list = data
        getSum()
    }

    function getSum() {
        let spjsSum:number = 0
        let spslSum:number = 0
        const data =  changeCarAddData.list
        for(let i in data) {
            if(data[i].checked) {
                spjsSum += parseFloat(data[i].remain)
                spslSum += parseFloat(data[i].remainWeight)
            }
        }
        selectedAll.remainSum = parseFloat(spjsSum.toFixed(NUMBER_DIGIT))
        selectedAll.remainWeightSum = parseFloat(spslSum.toFixed(WEIGHT_DIGIT))
    }

    function save() {
        const list =  changeCarAddData.list 
        const arr = []
        for(let i in list) {
            if(list[i].checked) {
                arr.push(list[i])
            }
        }
        const data = getLocalStorage('changeCar')
        data.dtOpList = data.dtOpList.concat(arr)
        setLocalStorage('changeCar', data)
        goAppoint()
    }

    function handleSearch() {
        changeCarAddData.params.pageNum = 1
        changeCarAddData.list = []
        changeCarAddData.total = 0
        changeCarAddData.finished = false
        changeCarStock()
        changeShowPopup()
    }

    function goAppoint() {
        router.back()
    }

    function selectWarehouse() {
        changeSpckmcShow()
    }

    function changeSpckmcShow() {
        searchData.showSpckmc = !searchData.showSpckmc
    }

    function warehouseSelected(index: number) {
        const data = warehouse3Data.list
        for(let i in data) {
            data[i].active = false
        }
        data[index].active = true
        changeCarAddData.query.spckmc = data[index].spckmc
        changeSpckmcShow()
    }

    function changeShowPopup() {
        headerBarStore.showPopup = false
    }

    function beforeClose() {
        changeShowPopup()
    }

    function reset() {
        changeCarAddData.query = {
            ...changeCarAddData.query,
            sptm:"", 
            spzs: "",
            spmc: "",
            spcd: "",
            spgh: "",
            spbh: "",
            ckcw:""
        }
        const data = warehouse3Data.list
        for(let i in data) {
            data[i].active = false
        }
    }
</script>
<style lang="scss" scoped>
    .search {
            width:584px;
            .search-content {
                padding: 69px 48px 66px; 
                .date-period-select {
                    margin-top: 20px;
                    .date {
                        text-align:center;
                        width:194px;
                        height:60px;
                        line-height: 60px;
                        background: #F3F4F7;
                        border-radius: 30px;
                    }
                    .start-date {
                        margin-right: 20px;
                    } 
                    .end-date {
                        margin-left: 20px;
                    }
                }
                .search-item {
                    text-align:center;
                    width: 451px;
                    height: 60px;
                    line-height: 60px;
                    border-radius: 30px;
                    background: #F3F4F7;
                    display:block;
                }
                .search-item-input {
                    text-align:center;
                    width: 451px;
                    height: 60px;
                    border-radius: 30px;
                    background: #F3F4F7;
                    display:block;
                    border:none;
                }
            }
            .search-footer {
                padding:0 50px 80px;   
                .btn {
                    width:212px;
                    height: 90px;
                }    
            } 
        } 
    .change-car-add {
        padding-bottom:120px;
        .select-warehouse3 {
            padding:15px 20px 30px;
            height: 550px;
            font-size: 26px;
            .item {
                min-width:150px;
                padding:0 20px;
                display:inline-block;
                height:60px;
                line-height: 60px;
                color:#999;
                text-align:center;
                border-radius:30px;
                border:1px solid #999;
                margin:15px;
                &.active {
                    color:#fff;
                    border:1px solid #255FB6;
                    background:#255FB6;
                }
            }
        }
        .section {
            border-radius: 10px;
            background-color:#fff;
            padding:24px;
            margin:36px 36px 0;
            .title {
                padding-left:18px;
                margin-bottom: 26px;
                .check-box {
                    margin-right: 26px;
                }
                .status {
                    padding:0 17px;
                    height: 30px;
                    line-height: 30px;
                    text-align:center;
                    box-sizing:border-box;
                }
                .normal-status {
                    border:1px solid #255FB6;
                    color:#255FB6;
                    background-color:#EAF5FF;
                }
                .freeze-status {
                    border:1px solid #CE0C0C;
                    color:#CE0C0C;
                    background-color:#FFF1F1;
                }
            }
            .content {
                border-top:1px solid #EEEEEE;
                padding:26px 0;
                .item {
                    padding-bottom:10px;
                }
            }
        } 
        .footer {
            position:fixed;
            bottom:0;
            left:0;
            right:0;
            width:100%;
            height:140px;
            background-color:#fff;
            .left {
                margin-left: 36px;
            }
            .center {
                margin-left: 50px;
            }
            .btn {
                width:199px;
                height: 90px;
                margin-right: 36px;
            }
        }
    }
</style>